<template>
  <div class="category-video-body">
    <div id="category-list" :class="['category-list',categoryFixoed?'category-fxied':'']">
      <div class="category-title">
        {{categoryStore.curentPCategory.categoryName}}
      </div>
      <div :class="['category-item',!route.params.categoryCode ? 'active' : '']"
           @click='jump({ categoryCode: "", pCategoryCode: route.params.pCategoryCode, returnPath: "" })'>
        全部
      </div>
      <div :class="['category-item',route.params.categoryCode == item.categoryCode ? 'active' : '']"
           v-for="item in categoryStore.curentPCategory.children" :key="item" @click="jump(item)">
        {{item.categoryName}}
      </div>
    </div>
    <VideoList :categoryIdInfo="categoryIdInfo" :categoryId="categoryId"></VideoList>
  </div>
</template>
<script setup>
import VideoList from "@/views/videoList/videoList.vue";
import {getCurrentInstance, onMounted, onUnmounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {ImgURL} from "@/utils/Request.js";
import VideoItem from "@/components/VideoItem.vue";
import {useCategoryStore} from "@/stores/categoryStore.js";
import navActionStore from "@/stores/navActionStore.js";

const NavActionStore = navActionStore();
const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const categoryStore = useCategoryStore();
const categoryFixoed = ref(false);
const loadingData = ref(false);
let aop = ref(0);
const jump = (item = { categoryCode: "", pCategoryCode: "", returnPath: "" }) => {
  const { categoryCode, pCategoryCode, returnPath } = item;
  let routeName, routeParams;
  if (categoryCode === "") {
    routeName = "categoryVideo";
    routeParams = { pCategoryCode };
  } else {
    routeName = "subCategoryVideo";
    routeParams = {
      categoryCode,
      returnPath: returnPath || "categoryVideo"
    };
  }
  router.push({ name: routeName, params: routeParams });
};
const categoryMap = categoryStore.categoryMap;
const categoryIdInfo = ref({});
const convertCodeId = (pCategoryCode,categoryCode) => {
  let pCategoryId
  let categoryId
  if(pCategoryCode){
    pCategoryId = categoryMap[pCategoryCode].pcategoryId;
  }
  if(categoryCode){
    categoryMap[pCategoryCode].children.forEach(item => {
      if(item.categoryCode === categoryCode){
        categoryId = item.pcategoryId;
      }
    })
  }
  categoryIdInfo.value = {
    pCategoryId,
    categoryId
  }
}
const categoryInit = ref(false)
// 监听路由变化，重新加载数据
watch(() => route.params,(newVal, oldVal) => {
    if(categoryInit.value){
    return;
    }
    categoryStore.saverCurentPCategory(route.params.pCategoryCode);
    convertCodeId(route.params.pCategoryCode,route.params.categoryCode);
})
// 监听categoryMap变化，重新加载数据
watch(() => categoryStore.categoryMap,(newVal, oldVal) => {
 if(newVal||Object.keys(newVal).length === 0){
  return;
 }
 categoryInit.value = true;
 categoryStore.saverCurentPCategory(route.params.pCategoryCode);
 convertCodeId(route.params.pCategoryCode,route.params.categoryCode);
})
const categoryId = ref(0);
onMounted(() => {
  categoryStore.saverCurentPCategory(route.params.pCategoryCode);
  convertCodeId(route.params.pCategoryCode,route.params.categoryCode);
  categoryId.value = 1
})

const categoryTopDistance = ref(200);
let initScrollTop = ref(0);
let scrollDown = ref(true);
const scrollHandler = (curScrollTop) =>{
  categoryFixoed.value = true;
  if(curScrollTop - initScrollTop.value > 0){
    scrollDown.value = true;
  }else{
    scrollDown.value = false;
  }
  initScrollTop.value = curScrollTop;
  if(curScrollTop >= categoryTopDistance.value){
    if(scrollDown.value){
      NavActionStore.setFixedHeader(false);
    }else{
      NavActionStore.setFixedHeader(true);
    }
  }else{
    NavActionStore.setFixedHeader(false);
    categoryFixoed.value = false;
  }
}
onMounted(()=>{
  categoryTopDistance.value = document.querySelector("#category-list").getBoundingClientRect().top;
  NavActionStore.setShowHeader(false);
  NavActionStore.setFixedHeader(false);
  NavActionStore.setFixedCategory(false);
  NavActionStore.setShowCategory(true);
  NavActionStore.setForceFixedHeader(false);
  NavActionStore.setShowHeader(true);
  mitter.on("windowScroll",(curScrollTop)=>{
    scrollHandler(curScrollTop);
  })
});
onUnmounted(()=>{
  mitter.off("windowScroll");
})
</script>
<style scoped lang="scss">
.category-video-body {
  margin-top: 30px;
  .category-list{
    display: flex;
    align-items: center;
    line-height: 30px;
    position: sticky;
    top: 0;
    height: 60px;
    background-color: white;
    z-index: 2;
    .category-title{
      font-size: 24px;
      margin-right: 40px;
      cursor: pointer;
    }
    .category-item{
      margin-right: 40px;
      font-size: 15px;
      cursor: pointer;
      border-bottom: 3px solid #fff;
      &:hover{
        color: #409EFF;
        border-color: #409EFF;
      }
    }
    .active{
      color: #409EFF;
      border-color: #409EFF;
    }
  }
  .category-fxied{
    padding: 0 5%;
    width: 110%;
    margin-left: -5%;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
    border-radius: 5px;
  }
}
</style>